<template>
  <div id="" class="footbox">
    <!-- <router-link :to="{ name: 'index', params: { }}" -->
    <!-- <a v-for="(items,index) in navMenu" :key="items.key"
     :class='{"active":idx==index}'
     @click='chooseNav(index)'>
      <span>
        <img :src="items.icon" alt="" v-if="idx!=index">
        <img :src="items.iconActive" alt="" v-else>
      </span><br>
      {{items.text}}
    </a> -->
    <!-- </router-link> -->
    <router-link :to="{ name: 'index', params: { }}">
      <span>
        <img src="@/assets/images/house-icon2@2x.png" alt="" v-if="idx==0">
        <img src="@/assets/images/house-icon@2x.png" alt="" v-else>
      </span><br>
      首页
    </router-link>
    <router-link :to="{ path: '/houseList', query: {rentType:1 }}">
      <span>
        <img src="@/assets/images/house-icon2@2x.png" alt="" v-if="idx==1">
        <img src="@/assets/images/house-icon@2x.png" alt="" v-else>
      </span><br>
      房源
    </router-link>
    <router-link :to="{ path: '/shortHouselist', query: {rentType:2 }}">
      <span>
        <img src="@/assets/images/shortRent-icon2@2x.png" alt="" v-if="idx==2">
        <img src="@/assets/images/shortRent-icon@2x.png" alt="" v-else>
      </span><br>
      短租
    </router-link>
    <router-link :to="{ name: 'members', params: { }}">
      <span>
        <img src="@/assets/images/user-icon2@2x.png" alt="" v-if="idx==3">
        <img src="@/assets/images/user-icon@2x.png" alt="" v-else>
      </span><br>
      我的
    </router-link>
  </div>
</template>
<script>
export default {
  name: "footNav",
  data: () => ({
    idx:0,
    // navMenu:[{
    //   icon:require('@/assets/images/index-icon@2x.png'),
    //   iconActive:require('@/assets/images/index-icon2@2x.png'),
    //   text:'首页',
    //   toName:'index',
    //   params:{}
    // },{
    //   icon:require('@/assets/images/house-icon@2x.png'),
    //   iconActive:require('@/assets/images/house-icon2@2x.png'),
    //   text:'房源',
    //   toName:'index',
    //   params:{}
    // },{
    //   icon:require('@/assets/images/shortRent-icon@2x.png'),
    //   iconActive:require('@/assets/images/shortRent-icon2@2x.png'),
    //   text:'短租',
    //   toName:'shortHouselist',
    //   params:{}
    // },{
    //   icon:require('@/assets/images/user-icon@2x.png'),
    //   iconActive:require('@/assets/images/user-icon2@2x.png'),
    //   text:'我的',
    //   toName:'index',
    //   params:{}
    // }]
  }),
  methods: {
    chooseNav(index) {
      this.idx = index;
    }
  },
  mounted(){
    // console.log(this.$router.currentRoute.name);
    var routerName = this.$router.currentRoute.name;
    switch (routerName) {
      case 'index':
        this.idx = 0;
        break;
      case 'houseList':
        this.idx = 1;
        break;
      case 'shortHouselist':
        this.idx = 2;
        break;
      case 'members':
        this.idx = 3;
        break;
      case 'landlord':
        this.idx = 3;
        break;
      default:

    }
  }
}
</script>
<style lang="scss" scoped>

.footbox{
  position: fixed;
  bottom: 0;
  left: 0; right: 0;
  z-index: 33;
  @include flex;
  text-align: center;
  border-top: 1px solid #ddd;
  padding-top:10px;
  font-size: 14px;
  background: white;
  a{
    @include flexcell;
    color: $lightColor;
    &.active{
      color: $blackColor;
    }
    img{
      width: 26%;
    }
  }
}
</style>
